<template>
	<div>
		<div class="cell" :style="{'background':config.config.property.bgColor}">
			<div class="cell-tool">
				<div class="bk-button-group">
					<ul class="btnSplitScreen">
						<li @click="cellCountclick(1)" :class="{ active: isActive, inactive: !isActive }"></li>
						<li @click="cellCountclick(4)" :class="{ factive: fisActive, finactive: !fisActive }"></li>
						<li @click="cellCountclick(9)" :class="{ nactive: nisActive, ninactive: !nisActive }"></li>
						<li @click="cellCountclick(16)" :class="{ txactive: txisActive, txinactive: !txisActive }"></li>
					</ul>
					<!-- <button @click="cellCountclick(1)" size="small">1</button>
				<button @click="cellCountclick(4)" size="small">4</button>
				<button @click="cellCountclick(9)" size="small">9</button>
				<button @click="cellCountclick(16)" size="small">16</button> -->
				</div>
			</div>
			<div class="videobox">
				<div class="cell-player">
					<!-- <div :class="cellClass(i)" v-for="i in cellCount" :key="i"-->
					<div :class="activeClass" v-for="i in cellCount" :key="i" style="background: #000;"
						@click="videoactive(i)">
						<video :id="i" controls></video>
						<div class="bottomtitle" :style="{'background':config.config.property.bottomtitle}">
							<span>{{i}}</span>
							<span>{{videotitle[nameindex].name}}</span>
							<span @click="toggleFullScreen(i)">
								<img src="./image/qp.png" alt="" />
							</span>
						</div>
						<!-- <video :id="'video'+i" controls style="width: 100%;height: 100%;background: #fff;"></video> -->
						<!-- <video style="width: 100%; height: 100%; object-fit: fill" ref="videoElement" controls></video> -->
					</div>
				</div>
			</div>

		</div>
	</div>

</template>
<script>
	import flvjs from 'flv.js';
	// import video from '@/apis/video.js';
	import chartBase from '@/mixin/chart-base.js';
	import emitComponentBase from '@/mixin/emit-component-base.js';
	import dataModel from '@/models/panel-config-data.js';
	import {
		checkNegative
	} from '@/utils/util';
	import {
		mapState
	} from 'vuex';
	import config from './config/config';
	// import HwCellPlayer from './HwCellPlayer.vue'


	export default {
		name: 'videoPlayback',
		components: {
			// HwCellPlayer
		},
		mixins: [chartBase, emitComponentBase],
		props: ['pareentId', 'widgetId', 'widgetInstanceId', 'widgetName', 'identifier', 'layout', 'w', 'h', 'Item'],
		data() {
			return {
				isActive: true,
				fisActive: true,
				nisActive: true,
				txisActive: true,
				isLoading: false,
				showVisible: false,
				isFull: false,
				cellCount: 4,
				videoaction: 1,
				videolink: [],
				videosrc: [{
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}],
				nameindex: 0,
				videotitle: [{
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}, {
					name: '',
				}],
				videoElement: [],
				activeClass: '',
				flvPlayers: {}, // 新增：用于存储每个视频的 flvPlayer 实例
			};
		},
		computed: {
			...mapState({}),
			cellClass() {
				return function(index) {
					switch (this.cellCount) {
						case 1:
							return ['cell-player-1']
						case 4:
							return ['cell-player-4']
						case 9:
							return ['cell-player-9']
						case 16:
							return ['cell-player-16']
						default:
							break;
					}

				}
			},
		},
		watch: {

		},
		created() {
			this.orgConfig = config;
			this.config = JSON.parse(JSON.stringify(this.orgConfig));
			this.chartId = `${this.widgetInstanceId}_01`;

		},
		mounted() {
			if (window.isLocalEnv) {
				this.loadWidget();
			}
			console.log(this.videosrc.length)
			if (this.cellCount == 1) {
				this.activeClass = 'cell-player-1'
			} else if (this.cellCount == 4) {
				this.activeClass = 'cell-player-4'
			} else if (this.cellCount == 9) {
				this.activeClass = 'cell-player-9'
			} else if (this.cellCount == 16) {
				this.activeClass = 'cell-player-16'
			}
		},
		beforeDestroy() {
		   this.destroyPlayer(); // 组件销毁前销毁播放器实例，释放资源
		 },
		methods: {
			toggleFullScreen(data) {
				const video = document.getElementById(data);
				if (!document.fullscreenElement) {
					if (video.requestFullscreen) {
						video.requestFullscreen(); // 标准方法
					} else if (video.mozRequestFullScreen) {
						/* Firefox */
						video.mozRequestFullScreen();
					} else if (video.webkitRequestFullscreen) {
						/* Chrome, Safari & Opera */
						video.webkitRequestFullscreen();
					} else if (video.msRequestFullscreen) {
						/* IE/Edge */
						video.msRequestFullscreen();
					}
				} else {
					if (document.exitFullscreen) {
						document.exitFullscreen(); // 标准方法
					} else if (document.mozCancelFullScreen) {
						/* Firefox */
						document.mozCancelFullScreen();
					} else if (document.webkitExitFullscreen) {
						/* Chrome, Safari and Opera */
						document.webkitExitFullscreen();
					} else if (document.msExitFullscreen) {
						/* IE/Edge */
						document.msExitFullscreen();
					}
				}
			},
			// 初始加载时 以及 编排面更改配置时 触发
			loadWidget(pageStatus) {
				this.pageStatus = pageStatus;
				this.updateConfigProperty();
				this.updateConfigData();
				if (window.isLocalEnv || this.emitComponentStatus) {
					this.updateParams(pageStatus);
					if (!this.isRealTime) {
						this.debounceGetData();
					}
				}
				this.afterLoadWidget();
				this.checkNegative(this.apiResult);
			},
			cellCountclick(data) {
				this.videoaction = 1
				if (data == 1) {
					this.isActive = !this.isActive
					this.fisActive = true
					this.nisActive = true
					this.txisActive = true
					this.activeClass = 'cell-player-1'
				}
				if (data == 4) {
					this.fisActive = !this.fisActive
					this.isActive = true
					this.nisActive = true
					this.txisActive = true
					this.activeClass = 'cell-player-4'
				}
				if (data == 9) {
					this.nisActive = !this.nisActive
					this.isActive = true
					this.fisActive = true
					this.txisActive = true
					this.activeClass = 'cell-player-9'
				}
				if (data == 16) {
					this.txisActive = !this.txisActive
					this.isActive = true
					this.fisActive = true
					this.nisActive = true
					this.activeClass = 'cell-player-16'
				}
				this.cellCount = data
			},
			videoactive(i) {
				if (i != this.videoaction && this.videoaction != 0) {
					document.getElementById(this.videoaction).style.border = 'none'
					this.videoaction = i
					console.log(i)
					document.getElementById(this.videoaction).style.border = '1px solid red'
				} else {
					this.videoaction = i
					console.log(i)
					document.getElementById(this.videoaction).style.border = '1px solid red'
				}


			},
			// 接收xvue发来的实时数据
			handleRealTimeCommunication(realTimeData) {
				if (this.config.config.property.isDebounce && this.isStopRealData) {
					return;
				}

				const result = this.getResult(realTimeData);
				if (this.isNoData || this.autoRefreshIsSameRes(result)) {
					this.isLoading = false;
					return;
				}
				const {
					data,
					property
				} = this.config.config;

				// api请求，拿到数据
				if (data.dataSourceType !== 'xMinerRedisRealTime') {
					this.getCorrectParams(this.params, data.dataSourceType); // 参数存入xvue，导出数据时使用
				}
				// this.apiResult = result;
				// this.lastParams = null;
				// this.sendDataToConfig(result);
				// const convertedData = convertData(result, property);
				// if (convertedData === -1) {
				//   this.$message.error(this.$demoi18n('view.dataSourceTypeErr'));
				//   this.setDataException();
				//   return;
				// }
				// this.generateChart(convertedData);
				// this.isLoading = false;
			},
			acceptEvtMsg(paramters, key, obj) {
				this.checkUpdateParams(obj);
			},
			checkUpdateParams(obj) {
				console.log('接收到的数据', obj)

				const _obj = obj || {};
				let oo = {}
				let flag = false;
				for (const key in _obj) {
					if (key.indexOf('emit_params_obj') > -1) {
						const o = _obj[key];
						if (o.eventKey) {
							const event = this.config.events.find(e => e.type === 'in' && e.key === o.eventKey);
							if (event) {
								flag = true;
								oo = o
							}
							break;
						}
					}
				}
				if (flag) {

					let objdata = oo?.parameters[oo?.keys[0]]

					let httpdata = { // 将JavaScript对象转换为JSON字符串
						serial: objdata.serial,
						code: objdata.code
					}
					fetch(this.config.config.property.input + "/api/v1/stream/start", {
							method: 'POST', // 指定请求方法为POST
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify(httpdata)
						})
						.then(response => response.json()) // 解析响应为JSON
						.then(data => {
							console.log(data)
							let srcindex = Number(this.videoaction) - 1
							this.nameindex = Number(this.videoaction) - 1
							if (this.videosrc[srcindex].src != '') {
								return
							} else {
								this.videotitle[srcindex].name = data.ChannelName
								this.videosrc[srcindex].src = data.FLV
								let url = this.videosrc[srcindex].src
								let urlObj = new URL(url);
								this.videosrc[srcindex].src = this.config.config.property.input + urlObj.pathname;
								console.log(this.videosrc)
								if (flvjs.isSupported()) {
									console.log('1111111111111111')

									const videoElement = document.getElementById(this.videoaction);
									console.log(videoElement)

									// 新增：每个视频独立 flvPlayer 实例，先销毁旧的
									if (this.flvPlayers[this.videoaction]) {
										this.flvPlayers[this.videoaction].destroy();
										this.flvPlayers[this.videoaction] = null;
									}

									const flvPlayer = flvjs.createPlayer({
										type: 'flv',
										url: this.videosrc[srcindex].src
									}, {
										enableStashBuffer: true, // 启用缓冲，提高播放稳定性
										stashInitialSize: 128, // 初始缓冲大小，单位KB
									});
									flvPlayer.attachMediaElement(videoElement);
									flvPlayer.load();
									flvPlayer.play();
									this.flvPlayers[this.videoaction] = flvPlayer;

									document.getElementById(this.videoaction).style.border = 'none'
								} else {
									console.error('FLV.js is not supported in this browser.');
								}
							}

						}) // 输出结果
						.catch(error => console.error('Error:', error)); // 捕获并处理错误
				}






				// let parmFile = new FormData()
				// parmFile.append("serial", obj.serial)
				// parmFile.append("code", obj.code)
				// const res = video.postvideo(this.config.config.property.input + "/api/v1/stream/start", parmFile);
				// console.log('视屏数据111', res)
				// this.videosrc.map((item,index)=>{
				// 	if (flvjs.isSupported()) {
				// 	      const videoElement = document.getElementById('video'+index);
				// 	      const flvPlayer = flvjs.createPlayer({
				// 	        type: 'flv',
				// 	        url: item.src
				// 	      });
				// 	      flvPlayer.attachMediaElement(videoElement);
				// 	      flvPlayer.load();
				// 	      flvPlayer.play();
				// 	    }
				// })





				// 检查下是否和本组件有关
				// const _obj = obj || {};
				// let oo = {}
				// let flag = false;
				// for (const key in _obj) {
				// 	if (key.indexOf(EMIT_PARAMS_OBJ) > -1) {
				// 		const o = _obj[key];
				// 		if (o.eventKey) {
				// 			const event = this.config.events.find(e => e.type === 'in' && e.key === o.eventKey);
				// 			if (event) {
				// 				flag = true;
				// 				oo = o
				// 			}
				// 			break;
				// 		}
				// 	}
				// }
				// if (flag) {
				// 	// 和本组件有关再执行组件接收到事件后的相关操作
				// 	console.log('_obj', _obj)
				// 	console.log('oo', oo)

				// 	this.isNoData = false;
				// 	this.isLoading = true;
				// 	this.autoRefresh();
				// 	const alarm_id = oo?.parameters[oo?.keys[0]]
				// 	let param = {
				// 		code: 'alarm_id',
				// 		value: alarm_id
				// 	}
				// 	let paramOo = [param]

				// 	// api请求，拿到数据
				// 	const {
				// 		data
				// 	} = this.config.config
				// 	this.isLoading = true
				// 	const method = `getChartData${data.dataSourceType}`;
				// 	const trueParams = this.getCorrectParams(this.params, data.dataSourceType);
				// 	trueParams = {
				// 		...trueParams,
				// 		params: paramOo,
				// 	};

				// 	dataModel[method](trueParams, data)
				// 		.then(result => {





				// 			this.showVisible = true
				// 			// 重置数据异常状态
				// 			this.resetAbnormalType();
				// 			this.reportIfFieldsError(this.getParams()?.propertyMapping, result);
				// 			if (this.autoRefreshIsSameRes(result)) {
				// 				return;
				// 			}

				// 		})
				// 		.catch(err => {
				// 			this.handleChartDataError(err);
				// 		})
				// 		.finally(() => {
				// 			this.isLoading = false;
				// 		});
				// }
			},
			destroyPlayer() {
				// 销毁所有 flvPlayer 实例
				if (this.flvPlayers) {
					Object.values(this.flvPlayers).forEach(player => {
						if (player) player.destroy();
					});
					this.flvPlayers = {};
				}
			},
			getChartData() {
				const {
					data,
					property
				} = this.config.config;

				// 如果dataSourceType为静态数据,把数据放到Vuex，发出事件，然后退出
				if (data.dataSourceType === 'staticData') {



					this.showVisible = true
					// 重置数据异常状态
					this.resetAbnormalType();
					return;
				}

				// api请求，拿到数据
				// if (data.dataSourceType) {
				// 	this.isNoData = false;
				// 	this.isLoading = true;
				// 	this.autoRefresh();
				// 	const method = `getChartData${data.dataSourceType}`;
				// 	const params = this.getCorrectParams(this.params, data.dataSourceType);
				// 	dataModel[method](params, data)
				// 		.then(result => {
				// 			this.apiResult = result
				// 			this.totalPages = Math.ceil(this.apiResult.length / itemsPerPage)
				// 			this.apiResult.forEach((it) => {
				// 				it.downtime1 = Math.floor(it.time / 60)
				// 				it.downtime2 = it.time % 60
				// 			})
				// 			this.result = this.apiResult[0]
				// 			const start = (this.currentPage - 1) * itemsPerPage
				// 			this.paginatedItems = this.apiResult.slice(start, start + itemsPerPage)
				// 			this.showVisible = true
				// 			// 重置数据异常状态
				// 			this.resetAbnormalType();
				// 			this.reportIfFieldsError(this.getParams()?.propertyMapping, result);
				// 			if (this.autoRefreshIsSameRes(result)) {
				// 				return;
				// 			}

				// 		})
				// 		.catch(err => {
				// 			this.handleChartDataError(err);
				// 		})
				// 		.finally(() => {
				// 			this.isLoading = false;
				// 		});
				// } else {
				// 	// 如果在用户面，则给提示
				// 	if (this.$route.name === 'userHomePage') {
				// 		this.$message({
				// 			message: this.$demoi18n('view.dataSourceTypeEmpty'),
				// 			type: 'warning',
				// 		});
				// 	}
				// }
			},
			// goToPage(page) {
			// 	const start = (page - 1) * itemsPerPage
			// 	this.paginatedItems = this.apiResult.slice(start, start + itemsPerPage)
			// 	this.currentPage = page
			// },
			// itemClick(params) {
			// 	console.log(this.widgetInstanceId)
			//   const orgEvtKey = this.orgConfig.events[0].key
			//   const outEvt = this.config.events[0]
			//   const { key } = outEvt.parameters[0] // key: 对应xminer接口中的参数/编码
			//   const { paramKey } = outEvt // paramKey: 对应数据面板中的字段名，如s，y
			//   console.log('=======params============', params)
			//   const outObj = {
			//     emit_params_obj: {
			//       eventKey: outEvt.key,
			//       type: 'terms',
			//       keys: [key],
			//       parameters: {
			//         [key]: params[paramKey],
			//       },
			//       widgetInstanceId: this.widgetInstanceId,
			//       sendTime: new Date().getTime(),
			//     },
			//   }
			//   // console.log("===================",outObj)
			//   // xvue提供的emit方法，用于发出事件的
			//   if (import.meta.env.PROD) {
			//     adapterComponent.emit(orgEvtKey, outObj)
			//   } else {
			//     emit(orgEvtKey, outObj)
			//   }
			// },
			// getTooltip() {
			//   return {
			//     config: this.config.config.property.tooltip || {},
			//     vars: {},
			//     params: this.params,
			//     parentComp: this,
			//   };
			// },
			checkNegative,
			itemClick(params, data) {
				console.log(params)
				this.chartClick(params, data);
				if (params) {
					this.sendAdvancedLinkagge({
						...params
					});
				}
			},
			handleAsTooltip(filterRes) {
				const {
					property
				} = this.config.config;
				const convertedData = convertData(filterRes, property);
				this.generateChart(convertedData);
			},
			
		},
	};
</script>
<style lang="less" scoped>
	// 图表通用样式，主要有黑色loading 和 黑色 '没有数据'，样式名需一致
	@import '../../common/chart.less';
</style>
<style>
	/* 全局loading样式修改 */

	.chartMain .loading .el-loading-spinner .circular {
		width: 34px !important;
		height: 34px !important;
	}

	.chartMain .el-dialog__header {
		padding: 9px 20px 10px !important;
		background: #2a3352 !important;
		text-align: left;
		box-sizing: border-box;
		height: 50px;
		line-height: 32px;
	}

	.chartMain .el-dialog__title {
		text-align: left;
		/* font-size: 18px; */
		line-height: 18px !important;
		color: #b2d3fe !important;
	}

	.chartMain .el-dialog__body {
		padding: 10px 20px 30px 20px;
		background: #1a2032 !important;
		line-height: 24px;
		font-size: 14px;
	}

	.chartMain .el-dialog__headerbtn .el-dialog__close {
		color: #b2d3fe !important;
	}

	.chartMain .dialog-footer {
		text-align: right;
		margin-bottom: -14px;
		margin-right: 4px;
	}

	.chartMain .el-dialog__headerbtn {
		top: 15px;
		/* font-size: 18px; */
	}
</style>
<style scoped lang="less">
	.cell {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.cell-tool {
		height: 40px;
		line-height: 30px;
	}

	.videobox {
		width: 100%;
		height: 92%;
		background: url(./image/right.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.cell-player {
		width: 95%;
		height: 90%;
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 5px;
		background: #000;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.cell-player-4 {
		width: 50%;
		height: 50% !important;
		box-sizing: border-box;
		padding: 5px;
		position: relative;

		.bottomtitle {
			width: 99%;
			height: 30px;
			position: absolute;
			left: 5px;
			bottom: 0;
		}

		video {
			width: 100%;
			/* 视频宽度填满容器 */
			height: 100%;
			/* 视频高度填满容器 */
			object-fit: cover;
			/* 保持视频的宽高比并覆盖整个容器 */
		}
	}

	.cell-player-1 {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;

		.bottomtitle {
			width: 100%;
			height: 30px;
			position: absolute;
			left: 0;
			bottom: 0;
		}

		video {
			width: 100%;
			/* 视频宽度填满容器 */
			height: 100%;
			/* 视频高度填满容器 */
			object-fit: cover;
			/* 保持视频的宽高比并覆盖整个容器 */
		}
	}

	// .cell-player-6-1 {
	// 	width: 66.66%;
	// 	height: 66.66% !important;
	// 	box-sizing: border-box;
	// }

	// .cell-player-6-2 {
	// 	width: 33.33%;
	// 	height: 66.66% !important;
	// 	box-sizing: border-box;
	// 	display: flex;
	// 	flex-direction: column;
	// }

	// .cell-player-6-none {
	// 	display: none;
	// }

	// .cell-player-6-2-cell {
	// 	width: 100%;
	// 	height: 50% !important;
	// 	box-sizing: border-box;
	// }

	// .cell-player-6 {
	// 	width: 33.33%;
	// 	height: 33.33% !important;
	// 	box-sizing: border-box;
	// }

	.cell-player-9 {
		width: 33.33%;
		height: 33.33% !important;
		box-sizing: border-box;
		padding: 5px;
		position: relative;

		.bottomtitle {
			width: 98%;
			height: 30px;
			position: absolute;
			left: 5px;
			bottom: 0;
		}

		video {
			width: 100%;
			/* 视频宽度填满容器 */
			height: 100%;
			/* 视频高度填满容器 */
			object-fit: cover;
			/* 保持视频的宽高比并覆盖整个容器 */
		}
	}

	.cell-player-16 {
		width: 25%;
		height: 25% !important;
		box-sizing: border-box;
		padding: 5px;
		position: relative;

		.bottomtitle {
			width: 97%;
			height: 30px;
			position: absolute;
			left: 5px;
			bottom: 0;
		}

		video {
			width: 100%;
			/* 视频宽度填满容器 */
			height: 100%;
			/* 视频高度填满容器 */
			object-fit: cover;
			/* 保持视频的宽高比并覆盖整个容器 */
		}
	}

	.cell {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bk-button-group {
		width: 100%;
		height: 30px;
		position: relative;
	}

	.btnSplitScreen {
		width: 185px;
		height: 28px;
		list-style: none;
		margin: 0;
		padding: 0;
		position: absolute;
		right: 0;
		top: 0;

		li {
			width: 28px;
			height: 28px;
			float: left;
			margin-right: 24px;
		}

		li:nth-child(4) {
			margin-right: 0;
		}
	}

	.active {
		background: url(./image/a.png) no-repeat;
		background-size: 100% 100%;
	}

	.inactive {
		background: url(./image/active.png) no-repeat;
		background-size: 100% 100%;
	}

	.factive {
		background: url(./image/f.png) no-repeat;
		background-size: 100% 100%;
	}

	.finactive {
		background: url(./image/factive.png) no-repeat;
		background-size: 100% 100%;
	}

	.nactive {
		background: url(./image/n.png);
		background-size: 100% 100%;
	}

	.ninactive {
		background: url(./image/nactive.png) no-repeat;
		background-size: 100% 100%;
	}

	.txactive {
		background: url(./image/tx.png) no-repeat;
		background-size: 100% 100%;
	}

	.txinactive {
		background: url(./image/txactive.png) no-repeat;
		background-size: 100% 100%;
	}

	// 	video::-webkit-media-controls-fullscreen-button {
	// 	    display: none;
	// 	}
	// 	video::-webkit-media-controls-play-button {
	// 	    display: none;
	// 	}
	// video::-webkit-media-controls-timeline {
	//     display: none;
	// }
	// video::-webkit-media-controls-current-time-display{
	//     display: none;           
	// }
	// video::-webkit-media-controls-time-remaining-display {
	//     display: none;           
	// }
	// video::-webkit-media-controls-mute-button {
	//     display: none;           
	// }

	// video::-webkit-media-controls-toggle-closed-captions-button {
	//     display: none;           
	// }
	// video::-webkit-media-controls-volume-slider {
	//     display: none;           
	// }
	video::-webkit-media-controls-enclosure {
		display: none;
	}

	.cellvideo {
		position: relative;
	}

	.bottomtitle {
		span:nth-child(1) {
			display: inline-block;
			width: 28px;
			height: 18px;
			background: #FFA100;
			color: #1E3146;
			text-align: center;
			line-height: 18px;
			position: absolute;
			left: 12px;
			top: 7px;
			transform: skew(-30deg);
			/* 倾斜角度 */
			overflow: hidden;
			/* 防止内容溢出 */
		}

		span:nth-child(2) {
			display: inline-block;
			height: 30px;
			line-height: 30px;
			color: #fff;
			position: absolute;
			left: 50px;
			top: 0px;
		}

		span:nth-child(3) {
			display: inline-block;
			width: 28px;
			height: 28px;
			position: absolute;
			right: 12px;
			top: 1px;
		}
	}
</style>